<template>
  <el-table
    ref="multipleTable"
    tooltip-effect="dark"
    style="width: 100%"
    :data="lists"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column
      label="序号"
      width="55"
      type="index"
      align="center"
    ></el-table-column>
    <el-table-column prop="username" label="用户名" width="200">
    </el-table-column>
    <el-table-column prop="nickname" label="昵称" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="nickname" label="操作" show-overflow-tooltip>
      <template slot-scope="scope">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="UpdateOne(scope.row.id)"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="open(scope.row.id)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "Lists",

  computed: {
    ...mapState(["lists"]),
  },
  methods: {
    ...mapActions(["deleteOne", "update"]),
    //删除
    open(id) {
      // console.log(id);

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteOne(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改
    UpdateOne(id) {
      this.$router.history.push({
        name: "update",
        params: { id: id },
      });
    },
  },
};
</script>

<style>
</style>